
.sider {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    padding: 15px;
    width: 340px;
    height: 95%;
    background: rgba(4, 65, 136, 0.6);
    z-index: 998;
    border-radius: 15px;
    .sider-header {
        width: 100%;
        margin: 0 auto;
    }

    .sider-header p.p3 {
        height: 40px;
        margin: 0 auto;
        text-align: center;
        line-height: 40px;
        font-size: 28px;
        color: #bddde6;
    }

    .contain {
        flex: 1;
        overflow-y: auto;
    }

    .contain::-webkit-scrollbar {
        width: 5px;
        background-color: #666;
        scrollbar-width: thin;
        scrollbar-color: #c1c1c1 #eee;
    }

    .contain::-webkit-scrollbar:hover {
        background-color: #666;
    }

    .contain::-webkit-scrollbar:active {
        background-color: #666;
    }

    .contain::-webkit-scrollbar-thumb {
        background-color: #0394C3;
    }

    .contain ul {
        list-style: none;
        padding: 0 15px 0 0;
        margin-top: 15px;
    }

    .contain ul li {
        width: 100%;
        cursor: pointer;
        background-image: url('../images/kuang.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-bottom: 10px;
        background-color: transparent;
    }

    .equip-box-active {
        background: url('../images/chooseKuang.png') center center no-repeat !important;
        background-size: 100% 100% !important;
    }

    .contain ul li {
        //color: #57daff;
        display: flex;
        width: 100%;
        height: 100%;
        text-align: center;
        text-decoration: none;
        flex-direction: column;
        .equip-box {
            margin: 10px 0;
            .equip{
                display: flex;
                align-items: center;
                margin-bottom: 5px;
                .equip-name {
                    width: 80px;
                    text-align: right;
                }
            }
            .equip-font{
                font-size: 18px;
            }
            .equip-item{
                font-size: 14px;
            }
            .el-button--mini, .el-button--small{
                font-size: 16px;
            }
            .font_red {
                color: red;
            }
            .font_grey {
                color: grey;
            }
            .font_green {
                color: #00EA37;
            }
            .bottom-btn-box{
                display: flex;
                justify-content: flex-end;
                margin-right: 30px;
                button{
                    appearance: none;
                    border: none;
                    height: 25px;
                    line-height: 25px;
                }
                .active-btn {
                    background: #409eff;
                    color: #FFFFFF;
                    width: 50px;
                    cursor: pointer;
                }
                .unactive-btn {
                    background: grey;
                    color: #FFFFFF;
                    width: 50px;
                }
            }
        }
    }

    .contain ul li a:hover {
        color: #FFF;
    }
}

.main {
    flex: 1;
    height: 95%;
    margin-left: 10px;
    margin-right: 10px;
    overflow: hidden;
    position: relative;
    background: rgba(4, 65, 136, 0.6);
    border: solid 15px transparent;
    border-radius: 15px;
    text-align: center;
}

.main iframe {
    border-radius: 1px;
}
